<template>
    <div>
        <Card>
            <div class="ly-content">
                <Row>
                    <div class="moneybox">
                        <Icon type="ios-information-circle-outline" color="red" size="16px"/>
                        <span>剩余条数：<em>{{this.$route.query.smsSurplus}}条</em></span>
                    </div>
                </Row>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="充值数量" prop="smsNumber">
                        <el-input v-model="ruleForm.smsNumber" style="width: 400px;"></el-input>
                    </el-form-item>
                    <el-form-item label="支付方式" prop="payType">
                        <el-radio-group v-model="ruleForm.payType">
                            <el-radio label="2">微信</el-radio>
                            <el-radio label="1">支付宝</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即充值</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>

                <Modal v-model="modalCode" title="二维码" width="450">
                    <div id="imgCode"></div>
                </Modal>


            </div>
        </Card>
    </div>
</template>

<script>
    import QRCode from 'qrcodejs2'

    export default {
        data() {
            return {
                modalCode: false,
                ruleForm: {
                    smsNumber: '',
                    payType: '',
                },
                rules: {
                    smsNumber: [
                        {required: true, message: '请输入充值条数', trigger: 'blur'},
                    ],
                    payType: [
                        {required: true, message: '请选择支付方式', trigger: 'change'}
                    ],
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.ruleForm.housingId = this.$route.query.housingId
                        this.postRequest("/api/bill/changeSmsPayType", this.ruleForm).then(res => {
                            console.log(res);
                            if (res.code == 20000) {
                                document.getElementById('imgCode').innerHTML = '';
                                let qrcode = new QRCode('imgCode', {
                                    width: 300,
                                    height: 300, // 高度
                                    text: res.data.qr_code
                                })

                                this.codeImg = res.data.payCode;
                                this.modalCode = true;
                            } else {
                                this.$Message.error({
                                    content: res.message,
                                    duration: 5
                                });
                            }
                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style lang="less" scoped>
    .ly-content {
        width: 100%;
        min-height: 800px;
        padding-top: 30px;
        .el-form-item {
            height: 60px;
        }

        .moneybox {
            font-szie: 16px;
            background: #f0faff;
            border: 1px solid #abdcff;
            border-radius: 4px;
            padding: 8px 48px 8px 8px;
            margin-bottom: 40px;
            span {
                padding-left: 10px;
            }
            em {
                color: red;
                font-style: normal;
            }
        }
    }
    #imgCode{
        padding-left: 60px;
    }
</style>
